import React from 'react';
import { Card, Table, Button, Space, Input, Form, Select, Tag, DatePicker } from 'antd';
import { DownloadOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';

const { Option } = Select;
const { RangePicker } = DatePicker;

interface LogRecord {
  id: string;
  operatorId: string;
  operatorName: string;
  operationType: string;
  operationModule: string;
  operationContent: string;
  ipAddress: string;
  status: string;
  operationTime: string;
}

const LogManagement: React.FC = () => {
  const [form] = Form.useForm();

  const handleSearch = () => {
    form.validateFields().then(values => {
      console.log('Search values:', values);
    });
  };

  const handleReset = () => {
    form.resetFields();
  };

  const handleExport = () => {
    console.log('Export logs');
  };

  const columns: ColumnsType<LogRecord> = [
    {
      title: '日志ID',
      dataIndex: 'id',
      key: 'id',
      width: 120,
      ellipsis: true,
    },
    {
      title: '操作人ID',
      dataIndex: 'operatorId',
      key: 'operatorId',
      width: 120,
      ellipsis: true,
    },
    {
      title: '操作人',
      dataIndex: 'operatorName',
      key: 'operatorName',
      width: 120,
      ellipsis: true,
    },
    {
      title: '操作类型',
      dataIndex: 'operationType',
      key: 'operationType',
      width: 100,
      render: (type: string) => {
        const colorMap: { [key: string]: string } = {
          create: 'success',
          update: 'processing',
          delete: 'error',
          query: 'default',
          login: 'blue',
          logout: 'default',
        };
        return <Tag color={colorMap[type]}>{type}</Tag>;
      },
    },
    {
      title: '操作模块',
      dataIndex: 'operationModule',
      key: 'operationModule',
      width: 150,
      ellipsis: true,
    },
    {
      title: '操作内容',
      dataIndex: 'operationContent',
      key: 'operationContent',
      width: 300,
      ellipsis: true,
    },
    {
      title: 'IP地址',
      dataIndex: 'ipAddress',
      key: 'ipAddress',
      width: 130,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      render: (status: string) => {
        const color = status === 'success' ? 'success' : 'error';
        const text = status === 'success' ? '成功' : '失败';
        return <Tag color={color}>{text}</Tag>;
      },
    },
    {
      title: '操作时间',
      dataIndex: 'operationTime',
      key: 'operationTime',
      width: 160,
    },
  ];

  const mockData: LogRecord[] = [
    {
      id: 'LOG-001',
      operatorId: 'ADMIN-001',
      operatorName: '管理员A',
      operationType: 'create',
      operationModule: '连接器管理',
      operationContent: '创建新的连接器: 北京节点-01',
      ipAddress: '192.168.1.100',
      status: 'success',
      operationTime: '2024-01-20 10:30:00',
    },
    {
      id: 'LOG-002',
      operatorId: 'ADMIN-002',
      operatorName: '管理员B',
      operationType: 'update',
      operationModule: '数据产品管理',
      operationContent: '更新数据产品信息: 产品A',
      ipAddress: '192.168.1.101',
      status: 'success',
      operationTime: '2024-01-20 11:15:00',
    },
    {
      id: 'LOG-003',
      operatorId: 'ADMIN-001',
      operatorName: '管理员A',
      operationType: 'delete',
      operationModule: '数据资源管理',
      operationContent: '删除数据资源: 资源B',
      ipAddress: '192.168.1.100',
      status: 'success',
      operationTime: '2024-01-20 13:45:00',
    },
    {
      id: 'LOG-004',
      operatorId: 'ADMIN-003',
      operatorName: '管理员C',
      operationType: 'login',
      operationModule: '系统管理',
      operationContent: '用户登录',
      ipAddress: '192.168.1.102',
      status: 'success',
      operationTime: '2024-01-20 14:00:00',
    },
    {
      id: 'LOG-005',
      operatorId: 'ADMIN-002',
      operatorName: '管理员B',
      operationType: 'update',
      operationModule: '接口管理',
      operationContent: '更新接口配置: API-001',
      ipAddress: '192.168.1.101',
      status: 'error',
      operationTime: '2024-01-20 15:30:00',
    },
  ];

  return (
    <div style={{ paddingTop: '20px' }}>
      <Card bordered={false}>
        <Form
          form={form}
          layout="inline"
          style={{ marginBottom: '24px' }}
          onFinish={handleSearch}
        >
          <Form.Item name="timeRange" label="操作时间">
            <RangePicker showTime />
          </Form.Item>
          <Form.Item name="operatorId" label="操作人ID">
            <Input placeholder="请输入操作人ID" />
          </Form.Item>
          <Form.Item name="operatorName" label="操作人">
            <Input placeholder="请输入操作人" />
          </Form.Item>
          <Form.Item name="operationType" label="操作类型">
            <Select placeholder="请选择操作类型" style={{ width: 120 }}>
              <Option value="create">新增</Option>
              <Option value="update">修改</Option>
              <Option value="delete">删除</Option>
              <Option value="query">查询</Option>
              <Option value="login">登录</Option>
              <Option value="logout">登出</Option>
            </Select>
          </Form.Item>
          <Form.Item name="operationModule" label="操作模块">
            <Select placeholder="请选择操作模块" style={{ width: 150 }}>
              <Option value="连接器管理">连接器管理</Option>
              <Option value="数据产品管理">数据产品管理</Option>
              <Option value="数据资源管理">数据资源管理</Option>
              <Option value="接口管理">接口管理</Option>
              <Option value="系统管理">系统管理</Option>
            </Select>
          </Form.Item>
          <Form.Item name="status" label="状态">
            <Select placeholder="请选择状态" style={{ width: 120 }}>
              <Option value="success">成功</Option>
              <Option value="error">失败</Option>
            </Select>
          </Form.Item>
          <Form.Item>
            <Space>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
              <Button onClick={handleReset}>重置</Button>
            </Space>
          </Form.Item>
        </Form>

        <div style={{ marginBottom: '16px', display: 'flex', justifyContent: 'flex-end' }}>
          <Button icon={<DownloadOutlined />} onClick={handleExport}>
            导出日志
          </Button>
        </div>

        <Table<LogRecord>
          columns={columns}
          dataSource={mockData}
          rowKey="id"
          scroll={{ x: 1500 }}
          pagination={{
            total: mockData.length,
            pageSize: 10,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total) => `共 ${total} 条记录`,
          }}
        />
      </Card>
    </div>
  );
};

export default LogManagement;